<div>
	<yu-panel title="作业流管理">
		<yu-row :gutter="24">
			<yu-col :span="5">
				<div class="tree-custom-flow">
					<yu-button-group>
						<el-button class="btn" @click="createTreeFn" :disabled="!addClassFnButton">新增</el-button>
						<el-button class="btn" @click="updateTreeFn" :disabled="!updateClassFnButton">修改</el-button>
						<el-button class="btn" @click="deleteTreeFn" :disabled="!deleteClassFnButton">删除</el-button>
					</yu-button-group>
				</div>
				<yu-xtree ref="refTree" :height="height" @node-click="nodeClickFn" :data-url="treeDataUrl" data-id="currentNodeId" data-label="currentNodeName"
				 data-pid="parentId" :data-async="async" data-root="0000" icon="iconPath" style="margin-right: 5px">
				</yu-xtree>
			</yu-col>
			<yu-col :span="19">
				<yu-xform related-table-name="refTable" form-type="search" v-model="searchFormdata">
					<yu-xform-group :column="4">
						<yu-xform-item label="系统名称" placeholder="系统名称" ctype="input" name="appName" :disabled="appNameDisabled"></yu-xform-item>
						<yu-xform-item label="作业流代码" placeholder="作业流代码" ctype="input" name="groupCode"></yu-xform-item>
						<yu-xform-item label="作业流名称" placeholder="作业流名称" ctype="input" name="groupName"></yu-xform-item>
					</yu-xform-group>
				</yu-xform>
				<yu-toolBar>
					<yu-button @click="addFn" v-if="isNodeLeaf&&addFnButton">新增</yu-button>
					<yu-button @click="modifyFn" v-if="updateFnButton">修改</yu-button>
					<yu-button @click="deleteFn" v-if="deleteFnButton">删除</yu-button>
					<yu-button @click="validateFn" v-if="validatorButton">作业流校验</yu-button>

					<yu-button @click="flowChartBarFn" v-if="flowChartFnButton">流程图</yu-button>
					<yu-button @click="exportFlowFn" v-if="exportFnButton">导出作业</yu-button>
					<yu-button @click="importFlowFn" v-if="isNodeLeaf&&importFnButton">导入作业</yu-button>
				</yu-toolBar>


				<!--<el-table-x ref="refTable" :data-url="dataUrl" :pageable="true" :radiobox="true" :table-columns="tableColumns" @custom-detail-click="viewDataFn"
				 @custom-flow-click="flowChartFn" @custom-flow-export="exportFlowFn">

				</el-table-x>-->
				<div ref="tableBox" style="overflow: auto;">
					<yu-xtable :height="tbHeight" ref="refTable" row-number :data-url="dataUrl"   selection-type="radio" :pageable="true">
						<yu-xtable-column label="系统名称" prop="appName" :show-overflow-tooltip="true"></yu-xtable-column>
						<yu-xtable-column label="作业流代码" prop="groupCode" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="viewDataFn(scope.row)">{{ scope.row.groupCode }}</a>
							</template>
						</yu-xtable-column>
						<yu-xtable-column label="作业流名称" prop="groupName" :show-overflow-tooltip="true"></yu-xtable-column>
						<yu-xtable-column label="目录路径" prop="folderPath" :show-overflow-tooltip="true"></yu-xtable-column>
						<yu-xtable-column fixed="right" label="操作" width="210" align='center'>
							<template slot-scope="scope">
								<yu-button @click="showRelAllFn(scope.row)" type="success"   size="small" style="margin-left:5px">血缘关系</yu-button>
								<yu-button @click="showFlowRefFn(scope.row)" type="success" size="small" >依赖关系</yu-button>
							</template>
						</yu-xtable-column>
					</yu-xtable>
				</div>
				<yu-xdialog :title="viewTitle" :visible.sync="dialogVisible" width="700px">

					<yu-xform ref="refForm" v-model="formdata" label-width="130px" :rules="rules">
						<yu-xform-group>
							<yu-xform-item label="应用系统编号" ctype="input" name="appCode" :colspan="24" disabled></yu-xform-item>
							<yu-xform-item label="作业流代码" maxlength="64" ctype="input" name="groupCode" :colspan="24" :disabled="isReadOnly" rules="required"></yu-xform-item>
							<yu-xform-item label="作业流名称" maxlength="120" ctype="input" name="groupName" :colspan="24" rules="required"></yu-xform-item>
							<yu-xform-item label="所属目录" ctype="input" name="folderName" :colspan="24" rules="required" readOnly icon='search' @click="selectFolder"></yu-xform-item>
							<yu-xform-item label="备注" maxlength="240" ctype="textarea" name="remark" :colspan="24" :rows="3"></yu-xform-item>
						</yu-xform-group>
					</yu-xform>

					<div class="yu-grpButton">
						<yu-button v-show="cancelBtnShow" @click="cancelFn">取消</yu-button>
						<yu-button v-show="saveBtnShow" type="primary" v-if="!isView" @click="saveFn" :disabled="isView">保存</yu-button>
						<yu-button v-show="saveBtnShow" type="info" v-if="isView" @click="saveFn" :disabled="isView">保存</yu-button>

					</div>
				</yu-xdialog>
			</yu-col>
		</yu-row>
	</yu-panel>


	<yu-xdialog :title="viewClassTitle" :visible.sync="classDialogVisible" width="700px">
		<el-form-x label-width="110px" ref="refClassForm" :group-fields="classFields" :buttons="classButtons" />
	</yu-xdialog>
	<yu-xdialog title="选择目录" :visible.sync="chooseFolderDialogVisible" width="300px">
		<yu-xtree :show-checkbox="true" ref="refFolderTree" :height="folderHeight" @check-change="folderNodeClickFn" :default-checked-keys="defaultFolderKey"
		 :data-url="treeDataUrl" data-id="currentNodeId" data-label="currentNodeName" data-pid="parentId" :data-async="async" default-expand-all
		 check-strictly :data-root="folderRoot" icon="iconPath">
		</yu-xtree>
		<div class="yu-grpButton">
			<yu-button v-show="saveBtnShow" type="primary" @click="selectFolderSaveFn">确认</yu-button>
			<yu-button v-show="cancelBtnShow" @click="selectFolderCancelFn">取消</yu-button>
		</div>
	</yu-xdialog>

	<yu-dialog title="作业流导入" :visible.sync="upLoadDialogVisible" width="400px">
		<yu-xform ref="refForm" v-model="upLoadDataformdata" label-width="120px">
			<yu-xform-group  >
				 <yu-xform-item label="作业流代码"   name="groupCode"   rules="required" ></yu-xform-item>
			</yu-xform-group>
		</yu-xform>
		<yu-upload class="upload-demo" :action="upLoadUrl" :before-upload="checkUpload" :on-success="successUpload" :file-list="appUploadDatas">
			<yu-button size="small" type="primary">点击上传</yu-button>
			<div slot="tip" class="el-upload__tip">只能上传xml文件，且不超过100M</div>
		</yu-upload>
	</yu-dialog>

	<yu-xdialog  title="血缘关系" :visible.sync="relateDialogVisiable" width="75%" >
		<yu-xform related-table-name="refRelTable" form-type="search" v-model="searchRelFormdata">
			<yu-xform-group :column="4">
				<yu-xform-item label="作业代码" placeholder="作业代码" ctype="input" name="actionCode"  ></yu-xform-item>
				<yu-xform-item label="查看方式" placeholder="查看方式" ctype="input" name="queryType"></yu-xform-item>
				<yu-xform-item label="层级" placeholder="层级" ctype="input" name="level"></yu-xform-item>
			</yu-xform-group>
		</yu-xform>
		<yu-xtable ref="refRelTable" row-number :data-url="relDataUrl" :pageable="false">
			<yu-xtable-column label="系统编号" prop="appCode"></yu-xtable-column>
		<!--	<yu-xtable-column label="系统名称" prop="appName"></yu-xtable-column>-->
			<yu-xtable-column label="作业流代码" prop="groupCode"/>
			<yu-xtable-column label="作业代码" prop="actionCode"></yu-xtable-column>
			<yu-xtable-column label="作业名称" prop="actionName"></yu-xtable-column>
			<!--	<yu-xtable-column label="目录路径" prop="folderPath"></yu-xtable-column>-->
		</yu-xtable>
	</yu-xdialog>
`
	<yu-xdialog  title="作业流依赖关系" :visible.sync="flowRefAllVisiable" width="75%" >
		<yu-xform  v-model="refAllFormdata">
			<yu-xform-group :column="2">
				<yu-xform-item label="系统代码"   ctype="input" name="appCode" disabled ></yu-xform-item>
			<!--	<yu-xform-item label="系统名称"   ctype="input" name="appCode"  disabled></yu-xform-item>-->
				<yu-xform-item label="作业流代码"    ctype="input" name="groupCode" disabled></yu-xform-item>
			<!--	<yu-xform-item label="作业流名称"    ctype="input" name="groupName" disabled></yu-xform-item>-->
		 	<yu-xform-item label="作业代码"    ctype="input" name="acitonCode"></yu-xform-item>
				<yu-xform-item label="作业名称"    ctype="input" name="acitonName"></yu-xform-item>
			</yu-xform-group>
		</yu-xform>
<!--
		<yu-xform related-table-name="refFlowRefAllTable" form-type="search" v-model="searchRefFormdata">
			<yu-xform-group :column="2">
				<yu-xform-item label="作业代码"    ctype="input" name="acitonCode"></yu-xform-item>
				<yu-xform-item label="作业名称"    ctype="input" name="acitonName"></yu-xform-item>
			</yu-xform-group>
		</yu-xform>-->


		<yu-xtable ref="refFlowRefAllTable" row-number :data-url="flowRefAllDataUrl"      :pageable="true"  >
			<yu-xtable-column label="作业代码" prop="actionCode"></yu-xtable-column>
			<yu-xtable-column label="作业名称" prop="actionName"></yu-xtable-column>
			<yu-xtable-column label="作业名称" prop="actionName"></yu-xtable-column>
			<yu-xtable-column label="事件代码" prop="eventCode"></yu-xtable-column>
			<yu-xtable-column label="事件类型" prop="eventType"></yu-xtable-column>
			<yu-xtable-column label="关联系统" prop="relAppCode"></yu-xtable-column>
			<yu-xtable-column label="关联作业流" prop="relJobCode"></yu-xtable-column>
			<yu-xtable-column label="关联作业代码" prop="relActionCode">
			</yu-xtable-column>
			<yu-xtable-column label="关联作业名称" prop="relActionName">
			</yu-xtable-column>
		</yu-xtable>

	</yu-xdialog>

</div>

<style>
	.tree-custom-flow {
		border: 1px solid #d1dbe5;
		margin-top: 10px;
		margin-right: 5px;
		padding: 0 !important;
	}

	.tree-custom-flow .yu-toolBar {
		padding: 0;
	}

	.tree-custom-flow .yu-toolBar>h2 {
		margin: 0;
		padding: 0;
		padding-left: 15px;
	}

	.tree-custom-flow .el-button-group {
		display: block;
	}

	.tree-custom-flow .el-button-group .el-button {
		border-width: 0;
		border-left-width: 1px;
		border-radius: 0;
		width: 33.3333334%;
	}

	.tree-custom-flow .el-button-group .el-button:first-child {
		border-left-width: 0;
	}

	.tree-custom-flow .el-button-group .el-button:last-child {
		border-right-width: 0;
	}

	.tree-custom-flow .el-tree {
		margin-top: 0;
		margin-right: 0;
		border-width: 0;
		border-top-width: 1px;
	}
</style>